import { useState } from 'react';
import { Card, Button, Space, Divider, Typography, Row, Col } from '@/utils/antd-imports';
import { 
  showNotification, 
  showAlert, 
  showUrgent, 
  showSuccess, 
  showError, 
  showWarning, 
  showInfo,
  NOTIFICATION_TYPES,
  NOTIFICATION_MESSAGES 
} from '../utils/notification';
import wsManager from '../utils/websocket';

const { Title, Text } = Typography;

export default function NotificationTest() {
  const [wsConnected, setWsConnected] = useState(false);

  // 测试基本通知
  const testBasicNotifications = () => {
    showSuccess('操作成功', '这是一条成功通知');
    setTimeout(() => showError('操作失败', '这是一条错误通知'), 1000);
    setTimeout(() => showWarning('警告信息', '这是一条警告通知'), 2000);
    setTimeout(() => showInfo('提示信息', '这是一条信息通知'), 3000);
  };

  // 测试预警通知
  const testAlertNotifications = () => {
    showAlert(NOTIFICATION_MESSAGES.ALERT_BUDGET_EXCEED, '项目A预算超支¥50,000');
    setTimeout(() => showAlert(NOTIFICATION_MESSAGES.ALERT_DEADLINE_APPROACHING, '项目B还有3天到期'), 1000);
    setTimeout(() => showAlert(NOTIFICATION_MESSAGES.ALERT_CONTRACT_EXPIRING, '合同C将于2024-01-15到期'), 2000);
  };

  // 测试紧急通知
  const testUrgentNotifications = () => {
    showUrgent(NOTIFICATION_MESSAGES.URGENT_SYSTEM_DOWN, '核心服务异常，预计30分钟内恢复');
    setTimeout(() => showUrgent(NOTIFICATION_MESSAGES.URGENT_SECURITY_BREACH, '检测到安全威胁，请立即处理'), 1000);
  };

  // 测试WebSocket消息
  const testWebSocketMessages = () => {
    if (!wsConnected) {
      alert('WebSocket未连接，请先连接WebSocket');
      return;
    }

    // 模拟发送不同类型的WebSocket消息
    const testMessages = [
      {
        type: 'alert',
        payload: {
          alertType: 'budget_exceed',
          title: '预算超支预警',
          description: '项目预算已超出限制',
          data: {
            projectName: '测试项目A',
            exceedAmount: 25000
          }
        }
      },
      {
        type: 'urgent',
        payload: {
          urgentType: 'system_down',
          title: '系统紧急停机',
          description: '核心服务出现故障',
          data: {
            affectedServices: '用户管理、项目管理',
            estimatedRecovery: '1小时'
          }
        }
      },
      {
        type: 'notification',
        payload: {
          level: 'warning',
          title: '系统维护通知',
          message: '系统将于今晚进行维护',
          description: '维护时间：22:00-02:00'
        }
      },
      {
        type: 'project',
        payload: {
          action: 'assigned',
          projectName: '新项目分配',
          deadline: '2024-02-15',
          title: '项目分配通知',
          description: '您被分配到新项目'
        }
      },
      {
        type: 'approval',
        payload: {
          action: 'pending',
          title: '审批待处理',
          description: '您有新的审批申请需要处理',
          id: 'APP-001'
        }
      }
    ];

    testMessages.forEach((message, index) => {
      setTimeout(() => {
        wsManager.send(message.type, message.payload);
      }, index * 2000);
    });
  };

  // 连接WebSocket
  const connectWebSocket = () => {
    try {
      wsManager.connect();
      setWsConnected(true);
      showSuccess('WebSocket连接', '正在尝试连接WebSocket...');
    } catch (error) {
      showError('连接失败', 'WebSocket连接失败: ' + error.message);
    }
  };

  // 断开WebSocket
  const disconnectWebSocket = () => {
    wsManager.disconnect();
    setWsConnected(false);
    showInfo('WebSocket断开', '已断开WebSocket连接');
  };

  return (
    <div style={{ padding: 24 }}>
      <Title level={2}>通知系统测试页面</Title>
      <Text type="secondary">
        此页面用于测试各种类型的通知功能，包括基本通知、预警通知、紧急通知和WebSocket消息。
      </Text>

      <Divider />

      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Card title="基本通知测试" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Button type="primary" onClick={testBasicNotifications} block>
                测试所有基本通知
              </Button>
              <Button onClick={() => showSuccess('成功', '操作成功')}>
                成功通知
              </Button>
              <Button onClick={() => showError('错误', '操作失败')}>
                错误通知
              </Button>
              <Button onClick={() => showWarning('警告', '请注意')}>
                警告通知
              </Button>
              <Button onClick={() => showInfo('信息', '提示信息')}>
                信息通知
              </Button>
            </Space>
          </Card>
        </Col>

        <Col span={12}>
          <Card title="预警通知测试" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Button type="primary" onClick={testAlertNotifications} block>
                测试所有预警通知
              </Button>
              <Button onClick={() => showAlert('预算超支预警', '项目预算已超出¥10,000')}>
                预算预警
              </Button>
              <Button onClick={() => showAlert('截止日期预警', '项目还有5天到期')}>
                截止日期预警
              </Button>
              <Button onClick={() => showAlert('合同到期预警', '合同将于下周到期')}>
                合同预警
              </Button>
            </Space>
          </Card>
        </Col>

        <Col span={12}>
          <Card title="紧急通知测试" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Button type="primary" onClick={testUrgentNotifications} block>
                测试所有紧急通知
              </Button>
              <Button danger onClick={() => showUrgent('系统停机', '核心服务异常')}>
                系统停机
              </Button>
              <Button danger onClick={() => showUrgent('安全威胁', '检测到异常访问')}>
                安全威胁
              </Button>
              <Button danger onClick={() => showUrgent('数据丢失', '重要数据可能丢失')}>
                数据丢失
              </Button>
            </Space>
          </Card>
        </Col>

        <Col span={12}>
          <Card title="WebSocket测试" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              <div style={{ marginBottom: 16 }}>
                <Text>连接状态: </Text>
                <Text type={wsConnected ? 'success' : 'danger'}>
                  {wsConnected ? '已连接' : '未连接'}
                </Text>
              </div>
              <Button 
                type="primary" 
                onClick={connectWebSocket}
                disabled={wsConnected}
                block
              >
                连接WebSocket
              </Button>
              <Button 
                onClick={disconnectWebSocket}
                disabled={!wsConnected}
                block
              >
                断开WebSocket
              </Button>
              <Button 
                onClick={testWebSocketMessages}
                disabled={!wsConnected}
                block
              >
                发送测试消息
              </Button>
            </Space>
          </Card>
        </Col>
      </Row>

      <Divider />

      <Card title="通知类型说明" size="small">
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <div>
              <Text strong>基本通知类型：</Text>
              <ul>
                <li><Text code>success</Text> - 成功通知（绿色）</li>
                <li><Text code>error</Text> - 错误通知（红色）</li>
                <li><Text code>warning</Text> - 警告通知（橙色）</li>
                <li><Text code>info</Text> - 信息通知（蓝色）</li>
              </ul>
            </div>
          </Col>
          <Col span={8}>
            <div>
              <Text strong>预警通知类型：</Text>
              <ul>
                <li><Text code>alert</Text> - 预警通知（橙色边框）</li>
                <li>预算超支、截止日期、合同到期等</li>
                <li>需要关注但不紧急</li>
              </ul>
            </div>
          </Col>
          <Col span={8}>
            <div>
              <Text strong>紧急通知类型：</Text>
              <ul>
                <li><Text code>urgent</Text> - 紧急通知（红色边框）</li>
                <li>系统停机、安全威胁、数据丢失等</li>
                <li>需要立即处理</li>
              </ul>
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  );
}
